<template>
  <div>
    <!--表格控件-->
    <Table :data="nowTableDate" :columns="tableColumns" height="560"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="text-align: center">
        <Page :total="totalNum" :page-size="pageSize"  @on-change="change" show-total show-elevator show-sizer></Page>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        //列名
        tableColumns: [],
        //表格数据
        tableData: [],
        //翻页时的当前展示数据
        nowTableDate:[],
        //后台获取数据的总条数
        totalNum: 0,
        //每页显示的数据条数
        pageSize:10
      }
    },
    mounted:function () {
      // http://localhost:8070/getAllpyfa
      this.axios.get("https://jsonplaceholder.typicode.com/users")//向后台发送请求


        .then(response => {
          // //获取表头
          // this.tableColumns = response.data.tableColumns
          // //获取后台所有数据
          // this.tableData = response.data.tableData
          // //数据总条数
          // this.totalNum = response.data.tableData.length
          // //如果数据的总条数超过当前页面显示的最多条数，则进行分页处理
          // if (this.totalNum > this.pageSize){
          //   this.nowTableDate = this.tableData.slice(0,this.pageSize)//对展现数据进行截取
          // }
          console.log(response)
        })
    },
    methods: {
      /***
       * 翻页控件页面变更的监听事件
       * @param index 当前选择的页码树
       */
      change(index){
        var _start = ( index - 1 ) * this.pageSize;
        var _end = index * this.pageSize;
        this.nowTableDate = this.tableData.slice(_start,_end);//数据分页
      }
    }
  }
</script>
<style>

</style>

